<!--  -->
<template>
  <div class="default-list">
    <div class="table-box">
      <ul id="tUl">
        <li id="tLi" v-for="(item, i) in revListData.head1" :key="i">
          <p :title="item.colV">{{ item.colV }}</p>
          <p v-for="(item1, j) in revListData.body" :key="j" :title="item1[item.colK]">
            <template v-if="item.colK == 'show_but' || item.colK == 'showBut'">
              <el-button
                size="mini"
                @click="handleToDeviceDetail(item1)"
                v-if="item1['show_but'] != ''"
                >详情</el-button
              >
              <span v-else>-</span>
            </template>
            <template v-else-if="item.colK == 'red'">
              <span style="color: red">red</span>
            </template>
            <template v-else>
                <span>{{item1[item.colK]}}</span>
            </template>
          </p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import $ from 'jquery'
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},

  //父组件传入子组件数据
  props: {
      revListData: null,
  },

  //格式化数据
  filters: {},

  data() {
    //这里存放数据
    return {};
  },

  //计算属性 类似于data概念
  computed: {},

  //监控data中的数据变化
  watch: {},

  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    //   this.ttdata = this.revListData
    //   console.log(this.ttdata);
  },

  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
      let ul = $('#tUl')
      let li = $('#tUl li')
      console.log(li.length);
      li.width(ul.width() / li.length);
  },

  //方法集合
  methods: {
      handleToDeviceDetail(e) {
      // console.log(e);
      // return
      if (e["show_but"]) {
        console.log("you show_but");
      } else {
        return console.log("没有详情");
      }

      let params = {};
      if (e.type) {
        // console.log('有flag:' + e.type);
        params = { id: e.id, flag: e.type };
      } else {
        // console.log('没有flag');
        params = { id: e.id };
      }
      this.$router.push({
        name: e["show_but"],
        params,
      });
    },
  },

  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>

<style scoped lang='less'>
/* 使用$符号可以标识一个变量;@import url(); 引入公共css类 */
.default-list {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  color: #eee;
  .table-box {
    width: 100%;
    height: 100%;
    ul {
      width: 100%;
      height: 100%;
      display: flex;
      box-sizing: border-box;
      li {
        // flex: 1;
        // width: 10%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        box-sizing: border-box;
        p {
          width: 100%;
          height: 9.1%;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 0.16rem;
          background: @ListTrBgColor!important;
          color: @FontBlue;
          font-size: 0.18rem;
          box-sizing: border-box;
          border: 1px solid #ddd;
          padding: 0 0.02rem;
          .el-button.el-button--default.el-button--mini {
              padding: 0.1rem 0.2rem;
              color: @ListHeadBgColor;
              font-size: 0.16rem;
          }
          span {
            display: block;
            width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
        p:first-child {
          background: @ListHeadBgColor!important;
          color: @FontColor!important;
          height: 9%;
          font-size: 0.16rem;
        }
      }
    }
  }
}
</style>